<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>健康体检</title>

		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<style type="text/css">
			/*下面两项是重置muicss的输入框label和input之间的宽比率*/
			
			.mui-input-row label {
				width: 50%;
			}
			
			.mui-input-row label~input {
				
				float: none
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">
		<header class="mui-bar mui-bar-nav" style="background-color: #FFFFFF;">
			<button type="button" class="mui-action-back mui-btn  mui-btn-link mui-pull-left own-button">
			<span class="mui-action-back mui-icon mui-icon-left-nav own-left-nav-color"></span>
			<span class="own-left-nav-color"></span>
		</button>
			<h1 class="mui-title">健康体检</h1>
		</header>

				<div class="mui-content" style="background-color: #FFFFFF;">
 
			<div class="mui-content own-content-padding" style="background-color: #FFFFFF;">
				<div class="mui-card" style="margin-top: 30px; border: solid 1px #04bb21 ;">
					
					<form class="mui-input-group">
						<div class="mui-input-row" style="width: 50%;">
							<label style="width: 15%;"><span class="mui-icon mui-icon-map"></span></label>
							<input id="passWrod" class="mui-input-clear" type="text" readonly="readonly" placeholder="长沙" style="width: 60%;">
 
						</div>
					</form>
 
				</div>
 
				<div class="mui-content-padded">
 
					<input id="pickDateBtn" type="text" placeholder="请选择日期" style="border: solid 1px #04BB21;" readonly="readonly">
					<input id='pickTimeBtn' type="text" placeholder="请选择时间" style="border: solid 1px #04BB21;" readonly="readonly">
					<form class="mui-input-group">
						<div class="mui-input-row" style="border: solid 1px #04BB21; color: red;font-weight:bold ; border-radius:3px ;">
							<label style="width: 45%;">服务价格 :</label>
							<input type="text" value="120元/时" readonly="readonly" style="width: 40%;">
						</div>
					</form>
 
					<form class="mui-input-group" style="margin-top:20px ; border-radius:3px ;">
						<div class="mui-input-row" style=" color: red;border: solid 1px #04BB21; font-weight:bold ;border-radius: 3px;">
 
							<label class="mui-col-sm-6 mui-col-xs-6" style="line-height: 20px; color: red; font-weight:bold ;width: 45%;">服务时长 :</label>
 
							<div class="mui-numbox mui-col-sm-6 mui-col-xs-6" data-numbox-min='1' data-numbox-max='9' style="float: none;">
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input id="test" class="mui-input-numbox" type="number" value="1" / readonly="readonly">
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
 
						</div>
					</form>
 
					<form class="mui-input-group" style="margin-top:20px ; border-radius:3px ;">
						<div class="mui-input-row" style="border: solid 1px #04BB21; color: red;font-weight:bold ;border-radius: 3px;">
							<label style="width: 45%;">总金额 :</label>
 
							<input id='money' type="text" value="120" readonly="readonly" style="width: 20%;">
							<span>元</span>
						</div>
					</form>
 
					<a href="addressList.html"><input style="border: solid 1px #04BB21; margin-top: 15px;" type="text" readonly="readonly" placeholder="服务对象" onclick="" id="orderName"></a>
 
					<div id="addr" style="color: b2b4b3;">
 
						<p id="phones" style="font-size: 16px;"></p>
						<p id="addmap" style="font-size: 16px;"></p>
						<p id="" style="font-size: 16px;">
							<span id="orderAddr"></span>
							<span id="orderAddrDetail"></span>
						</p>
					</div>
 
				</div>
 
				<div class="mui-button-row" style="margin: 10px 15px;">
 
					<button type="button" id="order" class="mui-btn mui-btn-block own-btn-green" style="padding: 5px 0px;" onclick=" createOrder()">我要预约</button>
				</div>
 
			</div>
 
		</div>
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
		<script src="../js/mui.min.js" charset="UTF-8"></script>
		<script src="../js/own.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../js/url.js"></script>
		<script>
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
				
			});
			
			var info = document.getElementById("pickDateBtn");
			var inf = document.getElementById("pickTimeBtn");
			//var money=document.getElementById("money").value;
			
			var testBox=document.getElementById("test");
			var money=document.getElementById("money");
					
			testBox.addEventListener('change', function() {
				
				testBox=this.value;
				
				for(var i=1;i<10;i++){
					if(testBox==i){
						
						money.value=120*i;
					}
					
				}
			
			});
			
			document.getElementById("pickDateBtn").addEventListener('tap', function() {
				var dDate = new Date();
				dDate.setFullYear(Date());

				var minDate = new Date();
				minDate.setFullYear(minDate.getFullYear(), minDate.getMonth(),minDate.getDate());
				
				
				var maxDate = new Date();
				maxDate.setFullYear(maxDate.getFullYear()+1, 11, 31);
				plus.nativeUI.pickDate(
					function(e) {
						var d = e.date;
						info.value = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
					}, 
					function(e) {
						info.value = "您没有选择日期";
					}, 
					{
						title: "请选择日期",
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					}
				);
			})
			document.getElementById("pickTimeBtn").addEventListener('tap', function() {
				var dTime = new Date();
				dTime.setHours(dTime.getHours()+2, dTime.getMinutes());
				plus.nativeUI.pickTime(function(e) {
					var d = e.date;
					var h = d.getHours();
					var m = d.getMinutes();
					h = (String(h).length > 1) ? h : '0' + h;
					m = (String(m).length > 1) ? m : '0' + m;

					inf.value = h + ":" + m;

				}, function(e) {
					inf.value = "您没有选择时间"
				}, {
					title: "请选择时间",
					is24Hour: true,
					time: dTime
				});
			});

			mui.plusReady(function() {

				if(plus.storage.getItem("orderPhone")==null){
 						
 				}else{
					$("#orderName").val(plus.storage.getItem("orderName"));
					$("#phones").text(plus.storage.getItem("orderPhone"));
					//$("#addmap").text(plus.storage.getItem("orderAddr"));
					//$("#detailedAdd").text(plus.storage.getItem("orderAddrDetail"));
	 
					$("#orderAddr").text(plus.storage.getItem("orderAddr"));
	 
					$("#orderAddrDetail").text(plus.storage.getItem("orderAddrDetail"));
					//plus.storage.setItem("money",money);
 				}
			});

			//document.getElementById("pickDateBtn");

			function createOrder() {
				//if(!$("#servicePerson").val() || !$("#shipAddress").val() || !$("#servicePersonPhone").val() 
				//|| !$("#serviceDate").val() || !$("#productId").val() || !$("#productName").val() || !$("#amount").val() 
				//|| !$("#pTotal").val() || !$("#tokenCode").val() || !$("#jshopUserName").val() || !$("#userId").val()){
				//alert("所有参数不能为空");
				//return ;
				//}
				
				
			 
				var maths=document.getElementById("test").value;
				var totalAmount=document.getElementById("money").value;
				
				plus.storage.setItem("money",totalAmount);
				
				plus.storage.setItem("orderAddrDetail",$("#orderAddrDetail").text());
				var data = {};
				var serviceDate=$("#pickDateBtn").val()+" "+$("#pickTimeBtn").val();
				data.numbers=maths;
				
				data.accountName =  plus.storage.getItem("user");
				data.accountId = plus.storage.getItem("accountId");
				data.tokenCode = plus.storage.getItem("tokenCode");
				data.shipAddress = $("#orderAddrDetail").text();
				data.servicePersonPhone = $("#phones").text();
				data.servicePerson = $("#orderName").val();
				data.serviceDate = serviceDate;
				data.productId = "2";
				data.productName = "心理咨询";
				data.amount = totalAmount;
				data.pTotal = totalAmount;
				data.province = plus.storage.getItem("orderAddr").split(" ")[0];
				data.city =	plus.storage.getItem("orderAddr").split(" ")[1];
				data.area = plus.storage.getItem("orderAddr").split(" ")[2];
				data.publicMoney="0";
				data.offset = 0; //从哪一条记录开始
				data.limit = 20; //每一页多少条记录
				
				//alert(JSON.stringify(data));
				$.ajax({
					url: url +"rest/commitOrder",
					type: "POST",
					data: data,
					success: function(result) {
						//返回json字符串，转成json对象进行属性获取
						result = JSON.parse(result);
						$("#resultCode").val(result.status);
						$("#resultMsg").val(result.msg);
						if(result.status != '0') {
							mui.alert(result.msg);
						} else {
							
							data.orderId=result.orderId;
							var dataStr = JSON.stringify(data)
							mui.toast("预约成功");
							mui.openWindow({
										url: '../mine/pay.html',
										id: '../mine/pay.html',
										extras:{dataStr:dataStr}
									});
							
						}
					}
				}); 

			}
			
			
			

		
		</script>
	</body>

</html>